<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>借款审批</span>
      </div>
      <div class="loanApprove-box">
        <!-- 日期选择器容器 -->
        <div class="date-box">
          <span class="date-span">日期选择</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="onDateChange"
          >
          </el-date-picker>
          <el-button type="success" class="filter-btn" @click="onSearch"
            >查询</el-button
          >
        </div>
        <div class="loanApplyList-box">
          <el-tabs type="border-card" @tab-click="onTabsClick">
            <el-tab-pane
              v-for="(item, index) in tabsList"
              :key="index"
              :label="item"
            >
              <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                :header-cell-style="{ background: '#e1e4e5' }"
              >
                <el-table-column prop="loanApplyId" label="借款编号">
                </el-table-column>
                <el-table-column prop="name" label="借款人"> </el-table-column>
                <el-table-column prop="applyTime" label="申请时间">
                </el-table-column
                ><el-table-column prop="amount" label="借款金额">
                </el-table-column>
                <el-table-column prop="duration" label="借款期限(月)">
                </el-table-column>
                <el-table-column prop="loanRate" label="借款利率">
                </el-table-column>
                <el-table-column prop="repayDay" label="还款日">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态"
                  :formatter="stateFormat"
                >
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-popconfirm
                      confirm-button-text="通过"
                      cancel-button-text="驳回"
                      confirm-button-type="success"
                      cancel-button-type="danger"
                      icon="el-icon-info"
                      icon-color="red"
                      title="是否通过？"
                      @onConfirm="agree(scope.row.loanApplyId)"
                      @onCancel="veto(scope.row.loanApplyId)"
                    >
                      <el-button slot="reference" type="primary" size="mini" :disabled="scope.row.status">审批</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column> </el-table
            ></el-tab-pane>
          </el-tabs>
        </div>
        <el-pagination
          @current-change="onPageChange"
          background
          layout="prev, pager, next"
          :page-count="filterData.totalPages"
          :current-page="filterData.curPage"
          :page-size="filterData.perPage"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      filterData: {
        // 日期开始时间
        start: "",
        // 日期结束时间
        end: "",
        // 总页数
        totalPages: 1,
        // 当前页
        curPage: 1,
        // 每页显示几条数据
        perPage: 3,
        // 审批状态
        approve_status: 0,
      },
      tabsList: ["未审批", "已审批"],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateRange: "",
      tableData: [
        {
          loanApplyId: "123",
          name: "王小虎",
          applyTime: "2016-05-02",
          amount: 1000,
          duration: 6,
          loanRate: 5.5,
          repayDay: 30,
          status: 0,
        },
      ],
    };
  },
  methods: {
    ...mapActions({
      getLoanApplyList: "loan/getLoanApplyList",
      updateLoanApplystate: "loan/updateLoanApplystate",
    }),
    getLoanList() {
      this.getLoanApplyList(this.filterData).then((res) => {
        this.tableData = res.content;
        this.filterData.totalPages = res.paginateInfo.pages;
      });
    },
    // 通过审批
    agree(id){
      this.updateLoanApply(id, 1)
    },
    // 驳回
    veto(id){
      this.updateLoanApply(id, 2)
    },
    updateLoanApply(id, status){
      var loanApply = {applyId : id, status: status}
      this.updateLoanApplystate(loanApply).then( res=>{
        this.$message.success('审批成功')
        this.getLoanList()
      })
    },
    // 点击查询按钮
    onSearch() {
      this.filterData.curPage = 1;
      this.getLoanList();
    },
    // 格式化审批状态
    stateFormat(row) {
      if (row.status === 0) {
        return "未审批";
      } else if (row.status === 1) {
        return "通过";
      } else if (row.status === 2) {
        return "驳回";
      }
    },
    // 当前页码发生变化时的回调
    onPageChange(index) {
      this.filterData.curPage = index;
      this.getLoanList();
    },
    // 当日期选择器选择的内容发生改变
    onDateChange(data) {
      if (data) {
        this.filterData.start = data[0];
        this.filterData.end = data[1];
      } else {
        this.filterData.start = "";
        this.filterData.end = "";
      }
    },
    // tab 被选中时触发
    onTabsClick(data) {
      this.filterData.approve_status = data.index;
      this.filterData.curPage = 1;
      this.getLoanList();
    },
  },
  created() {
    this.getLoanList();
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .loanApprove-box {
    .date-span {
      margin-right: 20px;
    }
    .filter-btn {
      margin-left: 10px;
    }
  }
  .loanApplyList-box {
    margin-top: 15px;
  }
}
</style>